<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>星际穿越</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <!--<link rel="stylesheet" type="text/css" href="css/media.css">-->
    <link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
<div class="box">
    <header class="header">
        <a href="javascript:;" class="header__logo">星际穿越</a>
        <nav class="header__nav">
            <a href="javascript:;" class="header__nav-item header__nav-item_status_active header__nav-item_i_1">地球</a>
            <a href="javascript:;" class="header__nav-item header__nav-item_i_2">黑洞</a>
            <a href="javascript:;" class="header__nav-item header__nav-item_i_3">外星球</a>
            <a href="javascript:;" class="header__nav-item header__nav-item_i_4">挑战探险</a>
            <a href="javascript:;" class="header__nav-item header__nav-item_i_5">移居外星</a>
            <a href="javascript:;" class="header__nav-item header__nav-item_custom_button">购买船票</a>
            <div class="header__nav-item-tip"></div>
        </nav>
    </header>
    <div class="container">
        <section class="screen-1">
            <div class="screen-1__wrap">
                <div class="screen-1__heading">在不远的未来,随着地球自然环境的恶化,人类面临着无法生存的威胁.</div>
            </div>
        </section>

        <section class="screen-2">
            <div class="screen-2__wrap">
                <div class="screen-2__heading">这时科学家们在太阳系中的土星附近发现了一
                    个虫洞,通过它可以打破人类的能力限制,到更遥远外太空寻找延续生命希望的机会.
                </div>
            </div>
        </section>

        <section class="screen-3">
            <div class="screen-3__wrap">
                <div class="screen-3__heading">一个探险小组通过这个虫洞穿越到太阳系之外,他们的目标是找到一颗适合人类移民的星球.
                </div>
            </div>
        </section>

        <section class="screen-4">
            <div class="screen-4__wrap">
                <div class="screen-4__heading">在寻找适合人类居住的星球中,探险队员着面临着前所未有,人类思想前所未及的巨大挑战.
                </div>
            </div>
        </section>

        <section class="screen-5">
            <div class="screen-5__heading">最终,宇航员库珀在五维空间中把黑洞数据传递给科学家墨菲,墨菲得到了方程式和黑洞数据,
                完成了科技革命.带领大部分地球人迁移到一个新的宇宙空间站.探险小组中的一位科学家找到了适合人类居住的星球,并开始胚胎种植计划准备培养新人类.
            </div>
        </section>
        <section class="buy">
            <a href="javascript:;" onclick="javascript:alert('船票已经卖光啦！')" class="buy__button">购买船票</a>
        </section>
    </div>
    <!-- <footer class="footer">
        © 2017 星际穿越 浙ICP备000000号
    </footer> -->
    <div class="outline">
        <a href="javascript:;" class="outline__item outline__item_i_1">地球</a>
        <a href="javascript:;" class="outline__item outline__item_i_2">黑洞</a>
        <a href="javascript:;" class="outline__item outline__item_i_3">外星球</a>
        <a href="javascript:;" class="outline__item outline__item_i_4">挑战探险</a>
        <a href="javascript:;" class="outline__item outline__item_i_5">移居外星</a>
    </div>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>